.central{
    position: absolute;
    left: 50%;
    top: 45%;
    transform: translate(-50%, -50%);
}

.ellipsisText {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hidden{
    display: none!important;
}

.left{
    float: left;
}

.right{
    float: right;
}

.login{
    position: absolute;
    width: 500px;
    padding: 50px 50px 20px;
    border: 1px solid #ccc;
    border-radius: 5px;
    .ant-form-item-label{
        width: 80px;
    }
    .btn{
        text-align: center;
        a{
            margin-left: 10px;
        }
    }
}

#root,
.App,
.section,
.user-center{
    width: 100%;
    height: 100%;
    .user-info{
        text-align: right;
    }
    .logout{
        margin-left: 15px;
        color: #1890ff;
        &:hover{
            cursor: pointer;
            opacity: .8;
        }
    }
    .ant-layout-header{
        padding: 0 15px;
    }
    .ant-layout{
        height: 100%;
        &>.ant-layout-header{
            background: linear-gradient(#f1f7f8, #fff);
            box-shadow: 0px 0px 20px 1px rgba(0,0,0,0.1);
            border-bottom: 1px solid #eee;
        }
        &>.ant-layout-sider{
            background-color: #fff;
        }
        &>.ant-layout-content{
            padding: 5px 10px;
            background-color: #f1f7f8;
        }
    }
    .react-resizable {
        position: relative;
        background-clip: padding-box;
    }
    .react-resizable-handle {
        position: absolute;
        right: -5px;
        bottom: 0;
        z-index: 1;
        width: 10px;
        height: 100%;
        cursor: col-resize;
    }
    .search-box,
    .table-box,
    .table-detail{
        padding: 15px 10px;
        background: #fff;
    }
    .search-box{
        border-bottom: 1px solid #eee;
        overflow: auto;
        .ant-input-affix-wrapper,
        .ant-input,
        .ant-select{
            width: 120px;
        }
        .ant-form-item{
            margin-right: 5px;
        }
        .ant-btn{
            &+.ant-btn{
                margin-left: 5px;
            }
        }
        .ant-form{
            float: left;
        }
        .add-btn{
            float: right;
        }
    }
    .table-box{
        .ant-table-thead{
            .ant-table-cell{
                padding: 8px 10px;
            }
            .ant-table-column-sorters{
                padding: 8px 0px;
            }
        }
        .ant-table-tbody{
            .ant-table-cell{
                padding: 8px 10px;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
            }
        }
        .ant-table-column-sorters-with-tooltip{
            display: block;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        td{
            span{
                color: #1890ff;
                &:hover{
                    cursor: pointer;
                    opacity: .85;
                }
                &.update{

                }
                &.delete{
                    color: orangered;
                }
            }
        }
    }
    .table-detail{
        .search-box{
            .ant-row{
                padding: 0;
            }
        }
        .ant-pagination{
            text-align: right;
        }
        .ant-row{
            padding: 0 10px;
            line-height: 40px;
            &.title{
                text-align: center;
                font-size: 18px;
                font-weight: bold;
            }
        }
        .panel{
            margin: 15px 10px 0;
            padding-bottom: 10px;
            border-bottom: 1px solid #eee;
            user-select: none;
            &>span{
                margin-right: 15px;
                cursor: pointer;
                &.active,
                &:hover{
                    color: #1890ff;
                }
            }
        }
        .panel-box{
            &>div{
                display: none;
                &.active{
                    display: block;
                }
            }
        }
    }
    .lesson-box{
        margin-top: 20px;
        padding: 0 10px;
        .file-icon{
            width: 38px;
            height: 44px;
            margin: 0 auto;
            background-image: url("../img/sprite.png");
            background-position: -660px -50px;
            &.avi {
                background-position: -51px -50px
            }
            &.mp3 {
                background-position: -118px -50px
            }
            &.mp4 {
                background-position: -187px -50px
            }
            &.pdf {
                background-position: -254px -50px
            }
            &.txt {
                background-position: -322px -50px
            }
            &.csv {
                background-position: -388px -50px
            }
            &.pptx {
                background-position: -456px -50px
            }
            &.xlsx {
                background-position: -525px -50px
            }
            &.docx {
                background-position: -592px -50px
            }
        }
        .item{
            margin: 0 0 20px;
            border: 1px solid #E6E6E6;
            &>.title{
                height: 50px;
                line-height: 50px;
                padding: 0 15px;
                background-color: #eee;
                overflow: hidden;
                .border{
                    margin-right: 15px;
                    padding-left: 5px;
                    font-size: 16px;
                    font-weight: 700;
                    border-left: 3px solid #068b9a;
                }
                .date{
                    font-size: 12px;
                    &>span{
                        margin-left: 20px;
                        color: #757575;
                    }
                }
            }
            &>.content{
                height: 160px;
                padding: 0 220px 15px 15px;
                position: relative;
                overflow: hidden;
                .card{
                    position: relative;
                    float: left;
                    width: 150px;
                    height: 130px;
                    padding-top: 30px;
                    margin-top: 15px;
                    margin-right: 15px;
                    border-radius: 5px;
                    &:not(.empty):hover{
                        background-color: #f9f9f9;
                    }
                    &.empty{
                        width: 200px;
                    }
                }
                .operation{
                    width: 220px;
                    padding-right: 10px;
                    position: absolute;
                    right: 0px;
                    top: 64px;
                    text-align: right;
                    .icon{
                        width: 24px;
                        height: 24px;
                        margin: 0 auto;
                        background-image: url("../img/sprite.png");
                        background-position: -554px -375px;
                    }
                    &>div{
                        margin-right: 40px;
                        color: #9E9E9E;
                        text-align: center;
                        vertical-align: middle;
                        user-select: none;
                    }
                    &:hover{
                        cursor: pointer;
                        opacity: .85;
                    }
                }
                .file-name{
                    display: block;
                    padding: 8px 5px;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                    text-align: center;
                }
                &.true{
                    height: auto;
                    .icon{
                        background-position: -607px -375px;
                    }
                }
            }
        }
    }
    .data-empty{
        line-height: 100px;
        text-align: center;
        color: #999;
    }
}

.ant-menu-submenu-selected{
    &>ul{
        height: auto!important;
        opacity: 1!important;
    }
}
